
var store = {
	save(key,value){
		localStorage.setItem(key,JSON.stringify(value));
	},
	fetch(key){
		return JSON.parse(localStorage.getItem(key)) || [];
	}
}

var list = store.fetch("todolist");

var filter = {
	all:function(list){
		return list;
	},
	finished:function(list){
		return list.filter(function(item){
			return item.isChecked;
		})
	},
	unfinished:function(list){
		return list.filter(function(item){
			return !item.isChecked;
		})
	}
};

//作业2
Vue.component('my-select',{
	data:function(){
		return {
			isShowSelect:false,
			val:""
		}
	},
	props:['list']
	,
	methods:{
		changeShow:function(){
			this.isShowSelect=!this.isShowSelect;
		},
		selectValue:function(value){
			this.val=value;
			this.isShowSelect=false;
		}
	},
	template:`<div>
				<input type="text" placeholder="点击下拉" v-model="val" v-on:click="changeShow()" class="form-control w200" />
				<div  v-if="isShowSelect">
					<ul-select v-on:selectVal="selectValue" v-bind:list="list"></ul-select>
				</div>

			</div>`
});

Vue.component('ul-select',{
	props:['list'],
	methods:{
		selectChange:function(value){
			this.$emit('selectVal',value);
		}
	},
	template:`<ul class="select">
					<li v-for="item in list" v-on:click="selectChange(item)" class="select-item">{{item}}</li>
				</ul>`
});

var cityList=["北京","上海","广州","深圳"];

var vm = new Vue({
	el:".main",
	data:{
		list:list,
		todo:"",
		editortodos:"",
		beforeContent:"",
		visibility:"all",  //all finished unfinished
		cityList:cityList
	},
	watch:{
		/*list:function(){
			store.save("todolist",this.list);
		}*/
		list:{
			handler:function(){
				store.save("todolist",this.list);
			},
			deep:true
		}
	},
	methods:{
		addTodo(event){
			this.list.push({
				content:this.todo,
				isChecked:false
			});
			this.todo = "";
		},
		removeTodo(todo){
			var index = this.list.indexOf(todo);
			this.list.splice(index,1);
		},
		editorTodo(todo){
			this.beforeContent = todo.content;
			this.editortodos = todo;
		},
		editorTodoend(todo){
			this.editortodos = "";
		},
		cancelTodo(todo){
			todo.content = this.beforeContent;
			this.editortodos = "";
		}
	},
	directives:{
		"foucs":{
			update(el,binding){
				if (binding.value) {
					el.focus();
				}
			}
		}
	},
	computed:{
		noCheckLength:function(){
			return this.list.filter(function(item){
				return !item.isChecked
			}).length;
		},
		filterList:function(){
			return filter[this.visibility]?filter[this.visibility](list):list;
		}
	}
});

function watchHashChange(){
	var hash = window.location.hash.slice(1);
	vm.visibility = hash;
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);